<template>
	<view :class="fixed?'tabBlock':'dTab'">
		<!-- h5中tabFixed，apptabFixed1 -->
		<view class="tabList" :class="fixed?'tabFixed':''" v-for="item in list" :key="item.name" @click="onClick(item.status)" >
			<text :class="defaultCurr==item.status?'active':'tab'">
				<text>{{item.name}}</text>
				<text class="line"></text>
			</text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array
			},
			fixed:{
				type:Boolean
			},
			defaultCurr:{
				type:String,
				default:'0'
			}
		},
		data() {
			return {
				currStatus:this.defaultCurr
			};
		},
		methods: {
			onClick(status) {
				this.currStatus=status;
				this.$emit('tabClick',status)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.dTab{
		 padding-left: 20rpx;
		 display: flex;
		 background:#FFFFFF;
	}
	.tabList{
		flex: 1;
		text-align: center;
	}
	.tab,.active{
		text-align: center;
		display: inline-block;
		font-size: 28rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		flex: 1;
	}
	.tab {
		color: #444444;
		text-align: center;
		position: relative;
		.line{
			display: none;
		}
	}
	.active {
		color: $uni-color-primary;
		font-weight: bold;
		position: relative;
		.line{
			position: absolute;
			height: 10rpx;
			background: $uni-color-primary;
			bottom: 20rpx;
			left: 0;
			width: 100%;
			border-radius: 3rpx;
		}
	}
	/*h5*/
	.tabFixed{
		position:fixed;
		z-index:9;
		top:80rpx;
		width: 100%;
	}
	/*app*/
	.tabFixed1{
		position:fixed;
		z-index:9;
		top:0rpx;
		width: 100%;
	}
	.tabBlock{
		padding:83rpx 0 0 0;
	}
</style>
